<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      padding: 20px;
    }
    div, li, p {
      line-height: 40px;
    }
    span {
      color: red;
    }
  </style>
</head>
<body>
  <h2>For...Of...</h2>
  <ul>
    <li>for...of...用来遍历所有数据解构的统一方法</li>
    <li>一个数据只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of...遍历它的成员.也就是说,for...of...循环内部调用的是数据结构的Symbol.iterator方法</li>
    <li>
      for...of循环可以使用的范围包括数组,Set,Map结构,某些类似数组对象(比如arguments对象,DOM NodeList对象),Generator对象以及字符串
    </li>
  </ul>

  <h2>__________________</h2>
  <ul>
    <li>
      <h3>数组</h3>
      <ul>
        <li>
          数组原生具备iterator接口,for...of循环本质上就是调用这个接口产生的遍历器.
        </li>
        <li>
          for..of循环数组,获得的是键值,而不是键名
        </li>
        <li>for..of循环调用遍历器接口,数组的遍历器接口只是返回具有数字索引的属性</li>
      </ul>
    </li>
    <li>
      <h3>Set和Map</h3>
      <ul>
        <li>Set和Map原生具有Iterator接口,可以直接使用for...of循环</li>
        <li>但是值得注意的有两个:Ⅰ 遍历的顺序是按照各个成员被添加进数据结构的次序.</li>
        <li>
          其次,Set结构遍历时返回的是一个值,而<span>Map结构遍历时返回的是一个数组</span>,该数组的每个成员为当前Map成员的键名和键值
        </li>
      </ul>
    </li>
    <li>
      <h3>计算生成数据结构</h3>
      <ul>
        <li>
          有些数据结构是在现有数据结构基础上计算生成的.比如ES6的数组, Set, Map.都部署了以下方法
        </li>
        <li>
          entries()返回一个遍历器对象.对于数组,键名就是索引值;对于Set,键名与键值相同;Map结构的iterator接口默认就是调用entries方法
        </li>
        <li>
          keys()用于遍历所有的键名
        </li>
        <li>
          values()返回一个遍历器对象,用于遍历所有的键值
        </li>
      </ul>
    </li>
    <li>
      <h3>类似数组对象</h3>
      <ul>
        <li>argunemts对象,字符串属于类似数组对象</li>
        <li>并不是所有类似数组对象都具有Iterator接口,一个简便的方法就是是哦那个Array.from()方法将其转化为数组</li>
      </ul>
    </li>
    <li>
      <h3>对象</h3>
      <ul>
        <li>对于普通对象,for...of..结构不能直接使用,否则会报错.必须部署了Iterator接口才能遍历</li>
      </ul>
    </li>
    <li>
      <h3>与其他遍历语法的比较</h3>
      <h4>其他语法的劣势</h4>
      <ul>
        <li>for循环写法复杂</li>
        <li>forEach无法中途跳出循环,除非手动抛出错误</li>
        <li>for...in...不可遍历数组键名,遍历结果会包括原型上的键</li>
      </ul>
      <h4>for...of...的优势</h4>
      <ul>
        <li>写法简单</li>
        <li>不同于forEach,可以与break,continue,和return结合使用</li>
        <li>提供了遍历所有数据结构的统一操作接口</li>
      </ul>
    </li>
  </ul>
</body>
</html>